<template>
    <BoxBorder13
        :colors="['#6586ec' ,'#2cf7fe']"
        class="bigDataCard"
    >
        <div class="header">
            <div class="title">各类型视频接入分类统计</div>
            <DeptList v-model="deptId" @change="changeDeptHandle"/>
        </div>
        <div class="body" ref="bodyRef">
            <VChart ref="chartRef" :option="mapOptions" :style="{ height: height }"/>
        </div>
    </BoxBorder13>
</template>

<script setup>
import {BoxBorder13} from "guodu-data-panel";
import VChart from "vue-echarts";
import {use} from "echarts";
import {TooltipComponent} from "echarts/components";
import {PieChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";
import {LabelLayout} from "echarts/features";
import {useTemplateRef} from "vue";
import DeptList from "@/views/CenterController/components/DepList.vue";
import {getVideoTypeInfo} from "@/api/CenterScreen/CenterScreen.js";
import {randomNumberInRange} from "@/utils/utils.js";

const value = ref('江苏省院');

use([TooltipComponent, PieChart, CanvasRenderer, LabelLayout]);

const mapOptions = ref({})


const bodyRef = useTemplateRef('bodyRef')
const height = ref('')

const colorArr = [
    "#218de0",
    "#01cbb3",
    "#85e647",
    "#5d5cda",
    "#05c5b0",
    "#c29927",
];
const colorAlpha = [
    "rgba(60,170,211,0.05)",
    "rgba(1,203,179,0.05)",
    "rgba(133,230,71,0.05)",
    "rgba(93,92,218,0.05)",
    "rgba(5,197,176,0.05)",
    "rgba(194,153,39,0.05)",
];
let data = [
    // {
    //     //             {value: 735, name: '办案中心'},
    //     //             {value: 580, name: '安防监控'},
    //     //             {value: 484, name: '远程庭审'},
    //     //             {value: 300, name: '监所监控'}
    //     value: 1048,
    //     name: "为民服务中心",
    //     itemStyle: {
    //         borderColor: colorArr[0],
    //         borderWidth: 2,
    //         shadowBlur: 20,
    //         shadowColor: "#41a8f8",
    //         shadowOffsetx: 25,
    //         shadowOffsety: 20,
    //         color: colorAlpha[0],
    //     },
    // },
    // {
    //     value: 735,
    //     name: "办案中心",
    //     itemStyle: {
    //         borderColor: colorArr[1],
    //         borderWidth: 2,
    //         shadowBlur: 20,
    //         shadowColor: colorArr[1],
    //         shadowOffsetx: 25,
    //         shadowOffsety: 20,
    //         color: colorAlpha[1],
    //     },
    // },
    // {
    //     value: 580,
    //     name: "安防监控",
    //     itemStyle: {
    //         borderColor: colorArr[2],
    //         borderWidth: 2,
    //         shadowBlur: 20,
    //         shadowColor: colorArr[2],
    //         shadowOffsetx: 25,
    //         shadowOffsety: 20,
    //         color: colorAlpha[2],
    //     },
    // },
    // {
    //     value: 484,
    //     name: "远程庭审",
    //     itemStyle: {
    //         borderColor: colorArr[3],
    //         borderWidth: 2,
    //         shadowBlur: 20,
    //         shadowColor: colorArr[3],
    //         shadowOffsetx: 25,
    //         shadowOffsety: 20,
    //         color: colorAlpha[3],
    //     },
    // },
    // {
    //     value: 300,
    //     name: "监所监控",
    //     itemStyle: {
    //         borderColor: colorArr[4],
    //         borderWidth: 2,
    //         shadowBlur: 20,
    //         shadowColor: colorArr[4],
    //         shadowOffsetx: 25,
    //         shadowOffsety: 20,
    //         color: colorAlpha[4],
    //     },
    // }
];
let intervalId;
onMounted(() => {
    nextTick(() => {
        height.value = `${bodyRef.value.clientHeight}px`;
    })
    //

    // 设置定时器，每10秒获取一次数据
    intervalId = setInterval(getData, 2 * 60 * 1000);
})


onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId);
    }
})

const deptId = ref(0)

const getData = async () => {
    // [
    //     {
    //         value: 1048,
    //         name: "为民服务中心",
    //         itemStyle: {
    //             borderColor: colorArr[0],
    //             borderWidth: 2,
    //             shadowBlur: 20,
    //             shadowColor: "#41a8f8",
    //             shadowOffsetx: 25,
    //             shadowOffsety: 20,
    //             color: colorAlpha[0],
    //         },
    //     }
    // ]
    const res = await getVideoTypeInfo(deptId.value)
    const data = res.data.map(item => {
        const index = randomNumberInRange(1, 5);
        return {
            value: item.videoCount,
            name: item.bigtype,
            itemStyle: {
                borderColor: colorArr[index],
                borderWidth: 2,
                shadowBlur: 20,
                shadowColor: colorArr[index],
                shadowOffsetx: 25,
                shadowOffsety: 20,
                color: colorAlpha[index],
            }
        }
    })

    setChartOptions(data)
}

const changeDeptHandle = async (id) => {
    await getData(id)
}

function dashed(val) {
    let dataArr = [];
    for (var i = 0; i < val; i++) {
        if (i % 2 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 10,
                itemStyle: {
                    normal: {
                        color: "rgb(0,0,0,0)",
                    },
                },
            });
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 20,
                itemStyle: {
                    normal: {
                        color: "rgb(0,0,0,0)",
                        borderWidth: 2,
                        borderColor: "rgba(33, 141, 224,0.18)",
                    },
                },
            });
        }
    }
    return dataArr;
}

const setChartOptions = (data) => {
    mapOptions.value = {
        tooltip: {
            trigger: 'item'
        },
        grid: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            containLabel: true
        },

        legend: {
            top: "center",
            left: "55%",
            orient: "vertical",
            data: data,
            icon: "circle",
            itemWith: 10,
            itemHeight: 10,
            itemGap: 5,
            formatter(name) {
                const item = data?.filter((item) => item.name === name)[0];
                return `{name|${name + " :"}}{value1| ${item?.value + "个}"}`;
                //     {value2|${((item.value / sum) * 100).toFixed(2) + "%"}}
            },
            textStyle: {
                rich: {
                    name: {
                        color: "#fff",
                        fontSize: 12,
                        width: 80,
                    },
                    value1: {
                        color: "#01cbb3",
                        fontSize: 12,
                        width: 65,
                    },
                    value2: {
                        color: "#85e647",
                        fontSize: 12,
                        width: 46,
                    },
                },
            },
        },
        series: [
            {
                type: "pie",
                radius: "80%",
                center: ["30%", "50%"],
                roseType: "radius",
                zlevel: 10,
                startAngle: 100,
                label: {
                    normal: {
                        show: false,
                        position: "inside",
                        formatter: "{b}",
                        textStyle: {
                            fontSize: 10,
                        },
                    },
                },
                data: data,
            },
            {
                type: "pie",
                radius: ["20%", "20.3%"],
                center: ["30%", "50%"],
                hoverAnimation: false,
                clockWise: false,
                itemStyle: {
                    normal: {
                        color: "#017383",
                    },
                },
                label: {
                    show: false,
                },
                data: dashed(18),
            },
            {
                type: "pie",
                radius: ["45%", "45.3%"],
                center: ["30%", "50%"],
                hoverAnimation: false,
                clockWise: false,
                itemStyle: {
                    normal: {
                        color: "#017383",
                    },
                },
                label: {
                    show: false,
                },
                data: dashed(40),
            },
            {
                type: "pie",
                radius: ["70%", "70.3%"],
                center: ["30%", "50%"],
                hoverAnimation: false,
                clockWise: false,
                itemStyle: {
                    normal: {
                        color: "#017383",
                    },
                },
                label: {
                    show: false,
                },
                data: dashed(60),
            },
            {
                type: "pie",
                radius: ["95%", "95.3%"],
                center: ["30%", "50%"],
                hoverAnimation: false,
                clockWise: false,
                itemStyle: {
                    normal: {
                        color: "#017383",
                    },
                },
                label: {
                    show: false,
                },
                data: dashed(70),
            }
        ],
    }
}
</script>

<style scoped lang="scss">

</style>